<template>
  <div class="flow-menu" ref="tool">
    <el-row :gutter="20">
      <el-col :span="20" :xs="24">
        <el-input placeholder="搜索" v-model="filterText" clearable>
        </el-input>
      </el-col>

      <el-button type="warning" icon="el-icon-star-off" circle></el-button>

    </el-row>
    <!-- 菜单开始 -->
    <div v-for="menu  in  invariantMenuList" :key="menu.id">
      <span class="ef-node-pmenu" @click="menu.open = !menu.open">
        <i :class="{'el-icon-caret-bottom': menu.open,'el-icon-caret-right': !menu.open}"></i>
        <img src="../../assets/img/u13016.png" alt="" style="width: 20px;height: 20px;">
        &nbsp;{{menu.name}}
      </span>
      <ul v-show="menu.open" class="ef-node-menu-ul">
        <draggable @end="end" @start="move" v-model="menu.children" :options="draggableOptions">
          <li v-for="subMenu in menu.children" class="ef-node-menu-li" :key="subMenu.id" :type="subMenu.type">
            <img src="../../assets/img/u13016.png" alt="" style="width: 20px;height: 20px;">
            {{subMenu.name}}
          </li>
        </draggable>
      </ul>
    </div>

    <span class="ef-node-pmenu" @click="projectOpen = !projectOpen">
      <i :class="{'el-icon-caret-bottom': projectOpen,'el-icon-caret-right': !projectOpen}"></i>
      <img src="../../assets/img/u13016.png" alt="" style="width: 20px;height: 20px;">
      &nbsp;项目转换
    </span>
    <div class="ef-node-project">
      <div v-for="menu  in  menuList" :key="menu.id" v-show="projectOpen">
        <span class="ef-node-pmenu" @click="menu.open = !menu.open">
          <i :class="{'el-icon-caret-bottom': menu.open,'el-icon-caret-right': !menu.open}"></i>
          <img src="../../assets/img/u13016.png" alt="" style="width: 20px;height: 20px;">
          &nbsp;{{menu.name}}
        </span>
        <ul v-show="menu.open" class="ef-node-menu-ul">
          <draggable @end="end" @start="move" v-model="menu.children" :options="draggableOptions">
            <li v-for="subMenu in menu.children" class="ef-node-menu-li" :key="subMenu.id" :type="subMenu.type">
              <img src="../../assets/img/u13019.png" alt="" style="width: 20px;height: 20px;">
              {{subMenu.name}}
            </li>
          </draggable>
        </ul>
      </div>
    </div>
    <!-- 菜单结束 -->
  </div>
</template>
<script>
  import draggable from "vuedraggable";

  var mousePosition = {
    left: -1,
    top: -1
  };

  export default {
    watch: {
      filterText(val) {
        if (val.length === 0) {
          this.menuList = this.nodesShow
        }
        this.menuList = this.rebuildData(val, this.nodesShow);
      }
    },
    data() {
      return {
        //模糊搜索
        nodesShow: [
          {
            type: "3",
            name: "建设银行数据开放项目",
            open: true,
            children: [
              {
                type: "3-1",
                name: "信用数据解析",
                // 自定义覆盖样式
                style: {}
              },
              {
                type: "3-2",
                name: "信用数解析",

                // 自定义覆盖样式
                style: {}
              },
              {
                type: "3-3",
                name: "数据解析",
                // 自定义覆盖样式
                style: {}
              }
            ]
          },
          {
            type: "5",
            name: "银行数据开放项目",
            open: true,
            children: [
              {
                type: "5-1",
                name: "信数据解析",
                // 自定义覆盖样式
                style: {}
              },
              {
                type: "5-2",
                name: "信解析",
                // 自定义覆盖样式
                style: {}
              },
              {
                type: "5-3",
                name: "信用数据解",
                // 自定义覆盖样式
                style: {}
              }
            ]
          },
          {
            type: "4",
            name: "建设银行数据",
            open: true,
            children: [
              {
                id: "4-1",
                type: "4-1",
                name: "信用数据",
                // 自定义覆盖样式
                style: {}
              },
              {
                type: "4-2",
                name: "信用数据析",

                // 自定义覆盖样式
                style: {}
              },
              {
                type: "4-3",
                name: "用数据解析",
                // 自定义覆盖样式
                style: {}
              }
            ]
          }
        ],


        // 每个对象只有type属性能传参！ 勿动！
        menuList: [
          {
            type: "3",
            name: "建设银行数据开放项目",
            open: true,
            children: [
              {
                type: "3-1",
                name: "信用数据解析",
                // 自定义覆盖样式
                style: {}
              },
              {
                type: "3-2",
                name: "信用数解析",

                // 自定义覆盖样式
                style: {}
              },
              {
                type: "3-3",
                name: "数据解析",
                // 自定义覆盖样式
                style: {}
              }
            ]
          },
          {
            type: "5",
            name: "银行数据开放项目",
            open: true,
            children: [
              {
                type: "5-1",
                name: "信数据解析",
                // 自定义覆盖样式
                style: {}
              },
              {
                type: "5-2",
                name: "信解析",
                // 自定义覆盖样式
                style: {}
              },
              {
                type: "5-3",
                name: "信用数据解",
                // 自定义覆盖样式
                style: {}
              }
            ]
          },
          {
            type: "4",
            name: "建设银行数据",
            open: true,
            children: [
              {
                id: "4-1",
                type: "4-1",
                name: "信用数据",
                // 自定义覆盖样式
                style: {}
              },
              {
                type: "4-2",
                name: "信用数据析",

                // 自定义覆盖样式
                style: {}
              },
              {
                type: "4-3",
                name: "用数据解析",
                // 自定义覆盖样式
                style: {}
              }
            ]
          }
        ],

        nodeMenu: {},
        projectOpen: true,
        filterText: '',
        activeNames: "1",
        // draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
        draggableOptions: {
          preventOnFilter: false,
          sort: false,
          disabled: false,
          ghostClass: "tt",
          // 不使用H5原生的配置
          forceFallback: true
          // 拖拽的时候样式
          // fallbackClass: 'flow-node-draggable'
        },
        // 默认打开的左侧菜单的id
        // defaultOpeneds: ["1", "2", "3"],
        invariantMenuList: [
          {
            id: "1",
            type: "projecGroup",
            name: "起止插件",
            open: true,
            children: [
              {
                id: "start",
                type: "start",
                name: "开始",
                // ico: "el-icon-time",
                // 自定义覆盖样式
                style: {}
              },
              {
                id: "end",
                type: "end",
                name: "结束",
                // ico: "el-icon-odometer",
                // 自定义覆盖样式
                style: {}
              }
            ]
          }
        ],


      };
    },
    components: {
      draggable
    },
    created() {
      /**
       * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
       * @param event
       */
      if (this.isFirefox()) {
        document.body.ondrop = function (event) {
          // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
          mousePosition.left = event.layerX;
          mousePosition.top = event.clientY - 50;
          event.preventDefault();
          event.stopPropagation();
        };
      }
    },
    methods: {
      // 模糊查询
      rebuildData(value, arr) {
        let newarr = [];
        arr.forEach(element => {
          if (element.children && element.children.length) {
            const ab = this.rebuildData(value, element.children);
            const obj = {
              ...element,
              children: ab
            };
            if (ab && ab.length) {
              newarr.push(obj);
            }
          } else {
            if (element.name.indexOf(value) > -1) {
              newarr.push(element);
            }
          }
        });
        return newarr;

      },

      // 根据类型获取左侧菜单对象
      getMenuByType(type) {
        if (type === "start" || type === "end") {
          for (let i = 0; i < this.invariantMenuList.length; i++) {
            let children = this.invariantMenuList[i].children;
            for (let j = 0; j < children.length; j++) {
              if (children[j].type === type) {
                return children[j];
              }
            }
          }
        }
        for (let i = 0; i < this.menuList.length; i++) {
          let children = this.menuList[i].children;
          for (let j = 0; j < children.length; j++) {
            if (children[j].type === type) {
              return children[j];
            }
          }
        }




      },
      // 拖拽开始时触发
      move(evt, a, b, c) {
        var type = evt.item.attributes.type.nodeValue;
        //console.log(evt.item.attributes);

        this.nodeMenu = this.getMenuByType(type);
      },
      // 拖拽结束时触发
      end(evt, e) {
        this.$emit("addNode", evt, this.nodeMenu, mousePosition);;
      },
      // 是否是火狐浏览器
      isFirefox() {
        var userAgent = navigator.userAgent;
        if (userAgent.indexOf("Firefox") > -1) {
          return true;
        }
        return false;
      }
    }
  };
</script>